<!doctype html>
<!--[if IE 7 ]>		 <html class="no-js ie ie7 lte7 lte8 lte9" lang="zh"> <![endif]-->
<!--[if IE 8 ]>		 <html class="no-js ie ie8 lte8 lte9" lang="zh"> <![endif]-->
<!--[if IE 9 ]>		 <html class="no-js ie ie9 lte9" lang="zh"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="zh"> <!--<![endif]-->
<head data-live-domain="api.jquery.com">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>.bind() | jQuery API Documentation</title>

  <meta name="author" content="JS Foundation - js.foundation">
  <meta name="description" content="">

  <meta name="viewport" content="width=device-width">

  <link rel="shortcut icon" href="//api.jquery.com/jquery-wp-content/themes/api.jquery.com/i/favicon.ico">

  <link rel="stylesheet" href="//api.jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=3">
  <link rel="stylesheet" href="//api.jquery.com/jquery-wp-content/themes/api.jquery.com/style.css">

  <script src="//api.jquery.com/jquery-wp-content/themes/jquery/js/modernizr.custom.2.8.3.min.js"></script>

  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>

  <script src="//api.jquery.com/jquery-wp-content/themes/jquery/js/plugins.js"></script>
  <script src="//api.jquery.com/jquery-wp-content/themes/jquery/js/main.js"></script>

  <script src="https://use.typekit.net/wde1aof.js"></script>
  <script>try{Typekit.load();}catch(e){}</script>
  <!-- at the end of the HEAD -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
  <link rel="stylesheet" href="//api.jquery.com/jquery-wp-content/themes/jquery/css/docsearch.css">

  <link rel='https://api.w.org/' href='//api.jquery.com/wp-json/' />
  <meta name="generator" content="WordPress 4.5.2" />
  <link rel="alternate" type="application/json+oembed" href="//api.jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fapi.jquery.com%2Fbind%2F" />
  <link rel="alternate" type="text/xml+oembed" href="//api.jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fapi.jquery.com%2Fbind%2F&#038;format=xml" />

</head>
<body class="api jquery single single-post postid-55 single-format-standard single-author singular">

<header>
  <section id="global-nav">
    <nav>
      <div class="constrain">
        <ul class="projects">
          <li class="project jquery"><a href="https://jquery.com/" title="jQuery">jQuery</a></li>
          <li class="project jquery-ui"><a href="https://jqueryui.com/" title="jQuery UI">jQuery UI</a></li>
          <li class="project jquery-mobile"><a href="https://jquerymobile.com/" title="jQuery Mobile">jQuery Mobile</a></li>
          <li class="project sizzlejs"><a href="https://sizzlejs.com/" title="Sizzle">Sizzle</a></li>
          <li class="project qunitjs"><a href="https://qunitjs.com/" title="QUnit">QUnit</a></li>
        </ul>
        <ul class="links">
          <li><a href="https://plugins.jquery.com/">Plugins</a></li>
          <li class="dropdown"><a href="https://contribute.jquery.org/">Contribute</a>
            <ul>
              <li><a href="https://js.foundation/CLA">CLA</a></li>
              <li><a href="https://contribute.jquery.org/style-guide/">Style Guides</a></li>
              <li><a href="https://contribute.jquery.org/triage/">Bug Triage</a></li>
              <li><a href="https://contribute.jquery.org/code/">Code</a></li>
              <li><a href="https://contribute.jquery.org/documentation/">Documentation</a></li>
              <li><a href="https://contribute.jquery.org/web-sites/">Web Sites</a></li>
            </ul>
          </li>
          <li class="dropdown"><a href="https://js.foundation/events">Events</a>
            <ul class="wide">
            </ul>
          </li>
          <li class="dropdown"><a href="https://jquery.org/support/">Support</a>
            <ul>
              <li><a href="https://learn.jquery.com/">Learning Center</a></li>
              <li><a href="https://irc.jquery.org/">IRC/Chat</a></li>
              <li><a href="https://forum.jquery.com/">Forums</a></li>
              <li><a href="https://stackoverflow.com/tags/jquery/info">Stack Overflow</a></li>
              <li><a href="https://jquery.org/support/">Commercial Support</a></li>
            </ul>
          </li>
          <li class="dropdown"><a href="https://js.foundation/">JS Foundation</a>
            <ul>
              <li><a href="https://js.foundation/about/join">Join</a></li>
              <li><a href="https://js.foundation/about/members">Members</a></li>
              <li><a href="https://js.foundation/about/leadership">Leadership</a></li>
              <li><a href="https://js.foundation/community/code-of-conduct">Conduct</a></li>
              <li><a href="https://js.foundation/about/donate">Donate</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </section>
</header>

<div id="container">
  <div id="logo-events" class="constrain clearfix">
    <h2 class="logo"><a href="https://jquery.com/" title="jQuery API Documentation">jQuery API Documentation</a></h2>

    <aside>
      <div id="broadcast">
        <a href="https://js.foundation/about/donate" title="Support the JS Foundation"><img src="/jquery-wp-content/themes/jquery/content/donate.png" title="Support the JS Foundation" alt="Support the JS Foundation" border="0" width="400" height="100"></a>
      </div>
    </aside>
  </div>

  <nav id="main" class="constrain clearfix">
    <div class="menu-top-container">
      <ul id="menu-top" class="menu">
        <li class="menu-item"><a href="https://jquery.com/download/">Download</a></li>
        <li class="menu-item current"><a href="https://api.jquery.com/">API Documentation</a></li>
        <li class="menu-item"><a href="https://blog.jquery.com/">Blog</a></li>
        <li class="menu-item"><a href="https://plugins.jquery.com/">Plugins</a></li>
        <li class="menu-item"><a href="https://jquery.com/browser-support/">Browser Support</a></li>
      </ul>
    </div>

    <form method="get" class="searchform" action="//api.jquery.com/">
      <button type="submit" class="icon-search"><span class="visuallyhidden">search</span></button>
      <label>
        <span class="visuallyhidden">Search jQuery API Documentation</span>
        <input type="text" name="s" value=""
               placeholder="Search">
      </label>
    </form>
  </nav>

  <div id="content-wrapper" class="clearfix row">

    <div class="content-right twelve columns">
      <div id="content">

        <article id="post-55" class="post-55 post type-post status-publish format-standard hentry category-deprecated-30 category-event-handler-attachment category-65 category-75 category-78">
          <header class="entry-header">
            <h1 class="entry-title">.bind()</h1>
            <hr>
            <div class="entry-meta">
              Categories: <span class="category"><a href="//api.jquery.com/category/deprecated/">Deprecated</a> &gt; <a href="//api.jquery.com/category/deprecated/deprecated-3.0/">Deprecated 3.0</a></span><span class="category-divider"> | </span><span class="category"><a href="//api.jquery.com/category/events/">Events</a> &gt; <a href="//api.jquery.com/category/events/event-handler-attachment/">Event Handler Attachment</a></span>		</div><!-- .entry-meta -->
          </header><!-- .entry-header -->

          <div class="entry-content">
            <article id="bind1" class="entry method"><h2 class="section-title">
              <span class="name">.bind( eventType [, eventData ], handler )</span><span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a></span><span class="version-details">version deprecated: <a href="/category/version/3.0/">3.0</a></span>
            </h2>
              <div class="entry-wrapper">
                <p class="desc"><strong>Description: </strong>Attach a handler to an event for the elements.</p>
                <ul class="signatures">
                  <li class="signature">
                    <h4 class="name">
                      <span class="version-details">version added: <a href="/category/version/1.0/">1.0</a></span><a id="bind-eventType-eventData-handler" href="#bind-eventType-eventData-handler"><span class="icon-link"></span>.bind( eventType [, eventData ], handler )</a>
                    </h4>
                    <ul>
                      <li id="bind-eventType-eventData-handler-eventType">
                        <div><strong>eventType</strong></div>
                        <div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
                        </div>
                        <div>A string containing one or more DOM event types, such as &quot;click&quot; or &quot;submit,&quot; or custom event names.</div>
                      </li>
                      <li id="bind-eventType-eventData-handler-eventData">
                        <div><strong>eventData</strong></div>
                        <div>Type: <a href="http://api.jquery.com/Types/#Anything">Anything</a>
                        </div>
                        <div>An object containing data that will be passed to the event handler.</div>
                      </li>
                      <li id="bind-eventType-eventData-handler-handler">
                        <div><strong>handler</strong></div>
                        <div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types/#Event">Event</a> eventObject )</div>
                        <div>A function to execute each time the event is triggered.</div>
                      </li>
                    </ul>
                  </li>
                  <li class="signature">
                    <h4 class="name">
                      <span class="version-details">version added: <a href="/category/version/1.4.3/">1.4.3</a></span><a id="bind-eventType-eventData-preventBubble" href="#bind-eventType-eventData-preventBubble"><span class="icon-link"></span>.bind( eventType [, eventData ] [, preventBubble ] )</a>
                    </h4>
                    <ul>
                      <li id="bind-eventType-eventData-preventBubble-eventType">
                        <div><strong>eventType</strong></div>
                        <div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
                        </div>
                        <div>A string containing one or more DOM event types, such as &quot;click&quot; or &quot;submit,&quot; or custom event names.</div>
                      </li>
                      <li id="bind-eventType-eventData-preventBubble-eventData">
                        <div><strong>eventData</strong></div>
                        <div>Type: <a href="http://api.jquery.com/Types/#Anything">Anything</a>
                        </div>
                        <div>An object containing data that will be passed to the event handler.</div>
                      </li>
                      <li id="bind-eventType-eventData-preventBubble-preventBubble">
                        <div><strong>preventBubble</strong></div>
                        <div>Type: <a href="http://api.jquery.com/Types/#Boolean">Boolean</a>
                        </div>
                        <div>Setting the third argument to false will attach a function that prevents the default action from occurring and stops the event from bubbling. The default is true.</div>
                      </li>
                    </ul>
                  </li>
                  <li class="signature">
                    <h4 class="name">
                      <span class="version-details">version added: <a href="/category/version/1.4/">1.4</a></span><a id="bind-events" href="#bind-events"><span class="icon-link"></span>.bind( events )</a>
                    </h4>
                    <ul><li id="bind-events-events">
                      <div><strong>events</strong></div>
                      <div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
                      </div>
                      <div>An object containing one or more DOM event types and functions to execute for them.</div>
                    </li></ul>
                  </li>
                </ul>
                <div class="longdesc" id="entry-longdesc">
                  <p>As of jQuery 3.0, <code>.bind()</code> has been deprecated. It was superseded by the <a href="/on/"><code>.on()</code></a> method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged. For earlier versions, the <code>.bind()</code> method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements <em>must exist</em> at the point the call to <code>.bind()</code> occurs. For more flexible event binding, see the discussion of event delegation in <a href="/on/"><code>.on()</code></a>.</p>
                  <p>Any string is legal for <code>eventType</code>; if the string is not the name of a native DOM event, then the handler is bound to a custom event. These events are never called by the browser, but may be triggered manually from other JavaScript code using <code>.trigger()</code> or <code>.triggerHandler()</code>.</p>
                  <p>If the <code>eventType</code> string contains a period (<code>.</code>) character, then the event is namespaced. The period character separates the event from its namespace. For example, in the call <code>.bind( &quot;click.name&quot;, handler )</code>, the string <code>click</code> is the event type, and the string <code>name</code> is the namespace. Namespacing allows us to unbind or trigger some events of a type without affecting others. See the discussion of <code>.unbind()</code> for more information.</p>
                  <p>There are shorthand methods for some standard browser events such as <a href="/click/"><code>.click()</code></a> that can be used to attach or trigger event handlers. For a complete list of shorthand methods, see the <a href="/category/events/">events category</a>.</p>
                  <p>When an event reaches an element, all handlers bound to that event type for the element are fired. If there are multiple handlers registered, they will always execute in the order in which they were bound. After all handlers have executed, the event continues along the normal event propagation path.</p>
                  <p>A basic usage of <code>.bind()</code> is:</p>
                  <div class="syntaxhighlighter javascript">
                    <table>
                      <tbody>
                      <tr>

                        <td class="gutter">

                          <div class="line n1">1</div>

                          <div class="line n2">2</div>

                          <div class="line n3">3</div>

                        </td>

                        <td class="code">
                          <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;#foo&quot;</span> ).bind( <span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>  alert( <span class="hljs-string">&quot;User clicked on &apos;foo.&apos;&quot;</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>

                  <p>This code will cause the element with an ID of <code>foo</code> to respond to the <code>click</code> event. When a user clicks inside this element thereafter, the alert will be shown.</p>
                  <h4 id="multiple-events">Multiple Events</h4>
                  <p>Multiple event types can be bound at once by including each one separated by a space:</p>
                  <div class="syntaxhighlighter javascript">
                    <table>
                      <tbody>
                      <tr>

                        <td class="gutter">

                          <div class="line n1">1</div>

                          <div class="line n2">2</div>

                          <div class="line n3">3</div>

                        </td>

                        <td class="code">
                          <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;#foo&quot;</span> ).bind( <span class="hljs-string">&quot;mouseenter mouseleave&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>  $( <span class="hljs-built_in">this</span> ).toggleClass( <span class="hljs-string">&quot;entered&quot;</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>

                  <p>The effect of this on <code>&lt;div id=&quot;foo&quot;&gt;</code> (when it does not initially have the &quot;entered&quot; class) is to add the &quot;entered&quot; class when the mouse enters the <code>&lt;div&gt;</code> and remove the class when the mouse leaves. </p>
                  <p>As of jQuery 1.4 we can bind multiple event handlers simultaneously by passing an object of event type/handler pairs:</p>
                  <div class="syntaxhighlighter javascript">
                    <table>
                      <tbody>
                      <tr>

                        <td class="gutter">

                          <div class="line n1">1</div>

                          <div class="line n2">2</div>

                          <div class="line n3">3</div>

                          <div class="line n4">4</div>

                          <div class="line n5">5</div>

                          <div class="line n6">6</div>

                          <div class="line n7">7</div>

                          <div class="line n8">8</div>

                        </td>

                        <td class="code">
                          <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;#foo&quot;</span> ).bind({</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-attr">click</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-comment">// Do something on click</span></code></div></div><div class="container"><div class="line"><code>  },</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-attr">mouseenter</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-comment">// Do something on mouseenter</span></code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>

                  <h4 id="event-handlers">Event Handlers</h4>
                  <p>The <code>handler</code> parameter takes a callback function, as shown above. Within the handler, the keyword <code>this</code> refers to the DOM element to which the handler is bound. To make use of the element in jQuery, it can be passed to the normal <code>$()</code> function. For example:</p>
                  <div class="syntaxhighlighter javascript">
                    <table>
                      <tbody>
                      <tr>

                        <td class="gutter">

                          <div class="line n1">1</div>

                          <div class="line n2">2</div>

                          <div class="line n3">3</div>

                        </td>

                        <td class="code">
                          <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;#foo&quot;</span> ).bind( <span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>  alert( $( <span class="hljs-built_in">this</span> ).text() );</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>

                  <p>After this code is executed, when the user clicks inside the element with an ID of <code>foo</code>, its text contents will be shown as an alert.
                  </p>
                  <p>As of jQuery 1.4.2 duplicate event handlers can be bound to an element instead of being discarded. This is useful when the event data feature is being used, or when other unique data resides in a closure around the event handler function.</p>
                  <p>In jQuery 1.4.3 you can now pass in <code>false</code> in place of an event handler. This will bind an event handler equivalent to: <code>function(){ return false; }</code>. This function can be removed at a later time by calling: <code>.unbind( eventName, false )</code>.</p>
                  <h4 id="event-object">
                    <a href="/category/events/event-object/">The Event object</a>
                  </h4>
                  <p>The <code>handler</code> callback function can also take parameters. When the function is called, the event object will be passed to the first parameter.</p>
                  <p>The event object is often unnecessary and the parameter omitted, as sufficient context is usually available when the handler is bound to know exactly what needs to be done when the handler is triggered. However, at times it becomes necessary to gather more information about the user&apos;s environment at the time the event was initiated. <a href="/category/events/event-object/">View the full Event Object</a>.</p>
                  <p>Returning <code>false</code> from a handler is equivalent to calling both <code>.preventDefault()</code> and <code>.stopPropagation()</code> on the event object.</p>
                  <p>Using the event object in a handler looks like this:</p>
                  <div class="syntaxhighlighter javascript">
                    <table>
                      <tbody>
                      <tr>

                        <td class="gutter">

                          <div class="line n1">1</div>

                          <div class="line n2">2</div>

                          <div class="line n3">3</div>

                          <div class="line n4">4</div>

                          <div class="line n5">5</div>

                          <div class="line n6">6</div>

                          <div class="line n7">7</div>

                        </td>

                        <td class="code">
                          <pre><div class="container"><div class="line"><code>$( <span class="hljs-built_in">document</span> ).ready(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>  $( <span class="hljs-string">&quot;#foo&quot;</span> ).bind( <span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> event </span>) </span>{</code></div></div><div class="container"><div class="line"><code>    alert( <span class="hljs-string">&quot;The mouse cursor is at (&quot;</span> +</code></div></div><div class="container"><div class="line"><code>      event.pageX + <span class="hljs-string">&quot;, &quot;</span> + event.pageY +</code></div></div><div class="container"><div class="line"><code>      <span class="hljs-string">&quot;)&quot;</span> );</code></div></div><div class="container"><div class="line"><code>  });</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>

                  <p>Note the parameter added to the anonymous function. This code will cause a click on the element with ID <code>foo</code> to report the page coordinates of the mouse cursor at the time of the click.</p>
                  <h4 id="passing-event-data">Passing Event Data</h4>
                  <p>The optional <code>eventData</code> parameter is not commonly used. When provided, this argument allows us to pass additional information to the handler. One handy use of this parameter is to work around issues caused by closures. For example, suppose we have two event handlers that both refer to the same external variable:</p>
                  <div class="syntaxhighlighter javascript">
                    <table>
                      <tbody>
                      <tr>

                        <td class="gutter">

                          <div class="line n1">1</div>

                          <div class="line n2">2</div>

                          <div class="line n3">3</div>

                          <div class="line n4">4</div>

                          <div class="line n5">5</div>

                          <div class="line n6">6</div>

                          <div class="line n7">7</div>

                          <div class="line n8">8</div>

                        </td>

                        <td class="code">
                          <pre><div class="container"><div class="line"><code><span class="hljs-keyword">var</span> message = <span class="hljs-string">&quot;Spoon!&quot;</span>;</code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;#foo&quot;</span> ).bind( <span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>  alert( message );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code>message = <span class="hljs-string">&quot;Not in the face!&quot;</span>;</code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;#bar&quot;</span> ).bind( <span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>  alert( message );</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>

                  <p>Because the handlers are closures that both have <code>message</code> in their environment, both will display the message <samp>Not in the face!</samp> when triggered. The variable&apos;s value has changed. To sidestep this, we can pass the message in using <code>eventData</code>:
                  </p>
                  <div class="syntaxhighlighter javascript">
                    <table>
                      <tbody>
                      <tr>

                        <td class="gutter">

                          <div class="line n1">1</div>

                          <div class="line n2">2</div>

                          <div class="line n3">3</div>

                          <div class="line n4">4</div>

                          <div class="line n5">5</div>

                          <div class="line n6">6</div>

                          <div class="line n7">7</div>

                          <div class="line n8">8</div>

                          <div class="line n9">9</div>

                          <div class="line n10">10</div>

                          <div class="line n11">11</div>

                          <div class="line n12">12</div>

                        </td>

                        <td class="code">
                          <pre><div class="container"><div class="line"><code><span class="hljs-keyword">var</span> message = <span class="hljs-string">&quot;Spoon!&quot;</span>;</code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;#foo&quot;</span> ).bind( <span class="hljs-string">&quot;click&quot;</span>, {</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-attr">msg</span>: message</code></div></div><div class="container"><div class="line"><code>}, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> event </span>) </span>{</code></div></div><div class="container"><div class="line"><code>  alert( event.data.msg );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code>message = <span class="hljs-string">&quot;Not in the face!&quot;</span>;</code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;#bar&quot;</span> ).bind( <span class="hljs-string">&quot;click&quot;</span>, {</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-attr">msg</span>: message</code></div></div><div class="container"><div class="line"><code>}, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> event </span>) </span>{</code></div></div><div class="container"><div class="line"><code>  alert( event.data.msg );</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>

                  <p>This time the variable is not referred to directly within the handlers; instead, the variable is passed in <em>by value</em> through <code>eventData</code>, which fixes the value at the time the event is bound. The first handler will now display <samp>Spoon!</samp> while the second will alert <samp>Not in the face!</samp>
                  </p>
                  <div class="warning">
                    <p>Note that objects are passed to functions <em>by reference</em>, which further complicates this scenario.</p>
                  </div>
                  <p>If <code>eventData</code> is present, it is the second argument to the <code>.bind()</code> method; if no additional data needs to be sent to the handler, then the callback is passed as the second and final argument.</p>
                  <div class="warning">
                    <p>See the <code>.trigger()</code> method reference for a way to pass data to a handler at the time the event happens rather than when the handler is bound.</p>
                  </div>
                  <p>As of jQuery 1.4 we can no longer attach data (and thus, events) to object, embed, or applet elements because critical errors occur when attaching data to Java applets.</p>
                  <p><strong>Note: </strong>Although demonstrated in the next example, it is inadvisable to bind handlers to both the <code>click</code> and <code>dblclick</code> events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the <code>dblclick</code> and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable.</p>
                </div>
                <section class="entry-examples" id="entry-examples"><header><h2>Examples:</h2></header><div class="entry-example" id="example-0">
                  <p>Handle click and double-click for the paragraph.  Note: the coordinates are window relative, so in this case relative to the demo iframe.</p>
                  <div class="syntaxhighlighter xml">
                    <table>
                      <tbody>
                      <tr>

                        <td class="gutter">

                          <div class="line n1">1</div>

                          <div class="line n2">2</div>

                          <div class="line n3">3</div>

                          <div class="line n4">4</div>

                          <div class="line n5">5</div>

                          <div class="line n6">6</div>

                          <div class="line n7">7</div>

                          <div class="line n8">8</div>

                          <div class="line n9">9</div>

                          <div class="line n10">10</div>

                          <div class="line n11">11</div>

                          <div class="line n12">12</div>

                          <div class="line n13">13</div>

                          <div class="line n14">14</div>

                          <div class="line n15">15</div>

                          <div class="line n16">16</div>

                          <div class="line n17">17</div>

                          <div class="line n18">18</div>

                          <div class="line n19">19</div>

                          <div class="line n20">20</div>

                          <div class="line n21">21</div>

                          <div class="line n22">22</div>

                          <div class="line n23">23</div>

                          <div class="line n24">24</div>

                          <div class="line n25">25</div>

                          <div class="line n26">26</div>

                          <div class="line n27">27</div>

                          <div class="line n28">28</div>

                          <div class="line n29">29</div>

                          <div class="line n30">30</div>

                          <div class="line n31">31</div>

                          <div class="line n32">32</div>

                          <div class="line n33">33</div>

                          <div class="line n34">34</div>

                          <div class="line n35">35</div>

                          <div class="line n36">36</div>

                          <div class="line n37">37</div>

                          <div class="line n38">38</div>

                          <div class="line n39">39</div>

                          <div class="line n40">40</div>

                          <div class="line n41">41</div>

                        </td>

                        <td class="code">
                          <pre><div class="container"><div class="line"><code><span class="hljs-meta">&lt;!doctype <span class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>bind demo<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">p</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">background</span>: yellow;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">font-weight</span>: bold;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">cursor</span>: pointer;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">padding</span>: <span class="hljs-number">5px</span>;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">p</span><span class="hljs-selector-class">.over</span> {</code></div></div><div class="container"><div class="line"><code>     <span class="hljs-attribute">background</span>: <span class="hljs-number">#ccc</span>;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">span</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">color</span>: red;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Click or double click here.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;p&quot;</span> ).bind( <span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> event </span>) </span>{</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;( &quot;</span> + event.pageX + <span class="hljs-string">&quot;, &quot;</span> + event.pageY + <span class="hljs-string">&quot; )&quot;</span>;</code></div></div><div class="container"><div class="line"><code>  $( <span class="hljs-string">&quot;span&quot;</span> ).text( <span class="hljs-string">&quot;Click happened! &quot;</span> + str );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;p&quot;</span> ).bind( <span class="hljs-string">&quot;dblclick&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>  $( <span class="hljs-string">&quot;span&quot;</span> ).text( <span class="hljs-string">&quot;Double-click happened in &quot;</span> + <span class="hljs-built_in">this</span>.nodeName );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;p&quot;</span> ).bind( <span class="hljs-string">&quot;mouseenter mouseleave&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> event </span>) </span>{</code></div></div><div class="container"><div class="line"><code>  $( <span class="hljs-built_in">this</span> ).toggleClass( <span class="hljs-string">&quot;over&quot;</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>

                  <h4>Demo:</h4>
                  <div class="demo code-demo"></div>
                </div>
                  <div class="entry-example" id="example-1">
                    <p>To display each paragraph&apos;s text in an alert box whenever it is clicked:</p>
                    <div class="syntaxhighlighter javascript">
                      <table>
                        <tbody>
                        <tr>

                          <td class="gutter">

                            <div class="line n1">1</div>

                            <div class="line n2">2</div>

                            <div class="line n3">3</div>

                          </td>

                          <td class="code">
                            <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;p&quot;</span> ).bind( <span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>  alert( $( <span class="hljs-built_in">this</span> ).text() );</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>

                  </div>
                  <div class="entry-example" id="example-2">
                    <p>You can pass some extra data before the event handler:</p>
                    <div class="syntaxhighlighter javascript">
                      <table>
                        <tbody>
                        <tr>

                          <td class="gutter">

                            <div class="line n1">1</div>

                            <div class="line n2">2</div>

                            <div class="line n3">3</div>

                            <div class="line n4">4</div>

                            <div class="line n5">5</div>

                            <div class="line n6">6</div>

                          </td>

                          <td class="code">
                            <pre><div class="container"><div class="line"><code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">handler</span>(<span class="hljs-params"> event </span>) </span>{</code></div></div><div class="container"><div class="line"><code>  alert( event.data.foo );</code></div></div><div class="container"><div class="line"><code>}</code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;p&quot;</span> ).bind( <span class="hljs-string">&quot;click&quot;</span>, {</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-attr">foo</span>: <span class="hljs-string">&quot;bar&quot;</span></code></div></div><div class="container"><div class="line"><code>}, handler );</code></div></div></pre>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>

                  </div>
                  <div class="entry-example" id="example-3">
                    <p>Cancel a default action and prevent it from bubbling up by returning <code>false</code>:</p>
                    <div class="syntaxhighlighter javascript">
                      <table>
                        <tbody>
                        <tr>

                          <td class="gutter">

                            <div class="line n1">1</div>

                            <div class="line n2">2</div>

                            <div class="line n3">3</div>

                          </td>

                          <td class="code">
                            <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;form&quot;</span> ).bind( <span class="hljs-string">&quot;submit&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;</code></div></div><div class="container"><div class="line"><code>})</code></div></div></pre>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>

                  </div>
                  <div class="entry-example" id="example-4">
                    <p>Cancel only the default action by using the .preventDefault() method.</p>
                    <div class="syntaxhighlighter javascript">
                      <table>
                        <tbody>
                        <tr>

                          <td class="gutter">

                            <div class="line n1">1</div>

                            <div class="line n2">2</div>

                            <div class="line n3">3</div>

                          </td>

                          <td class="code">
                            <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;form&quot;</span> ).bind( <span class="hljs-string">&quot;submit&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> event </span>) </span>{</code></div></div><div class="container"><div class="line"><code>  event.preventDefault();</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>

                  </div>
                  <div class="entry-example" id="example-5">
                    <p>Stop an event from bubbling without preventing the default action by using the .stopPropagation() method.</p>
                    <div class="syntaxhighlighter javascript">
                      <table>
                        <tbody>
                        <tr>

                          <td class="gutter">

                            <div class="line n1">1</div>

                            <div class="line n2">2</div>

                            <div class="line n3">3</div>

                          </td>

                          <td class="code">
                            <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;form&quot;</span> ).bind( <span class="hljs-string">&quot;submit&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> event </span>) </span>{</code></div></div><div class="container"><div class="line"><code>  event.stopPropagation();</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>

                  </div>
                  <div class="entry-example" id="example-6">
                    <p>Bind custom events.</p>
                    <div class="syntaxhighlighter xml">
                      <table>
                        <tbody>
                        <tr>

                          <td class="gutter">

                            <div class="line n1">1</div>

                            <div class="line n2">2</div>

                            <div class="line n3">3</div>

                            <div class="line n4">4</div>

                            <div class="line n5">5</div>

                            <div class="line n6">6</div>

                            <div class="line n7">7</div>

                            <div class="line n8">8</div>

                            <div class="line n9">9</div>

                            <div class="line n10">10</div>

                            <div class="line n11">11</div>

                            <div class="line n12">12</div>

                            <div class="line n13">13</div>

                            <div class="line n14">14</div>

                            <div class="line n15">15</div>

                            <div class="line n16">16</div>

                            <div class="line n17">17</div>

                            <div class="line n18">18</div>

                            <div class="line n19">19</div>

                            <div class="line n20">20</div>

                            <div class="line n21">21</div>

                            <div class="line n22">22</div>

                            <div class="line n23">23</div>

                            <div class="line n24">24</div>

                            <div class="line n25">25</div>

                            <div class="line n26">26</div>

                            <div class="line n27">27</div>

                            <div class="line n28">28</div>

                            <div class="line n29">29</div>

                            <div class="line n30">30</div>

                            <div class="line n31">31</div>

                            <div class="line n32">32</div>

                            <div class="line n33">33</div>

                            <div class="line n34">34</div>

                            <div class="line n35">35</div>

                            <div class="line n36">36</div>

                            <div class="line n37">37</div>

                            <div class="line n38">38</div>

                          </td>

                          <td class="code">
                            <pre><div class="container"><div class="line"><code><span class="hljs-meta">&lt;!doctype <span class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>bind demo<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">p</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">color</span>: red;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">span</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">color</span>: blue;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Has an attached custom event.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Trigger custom event<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;display: none;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;p&quot;</span> ).bind( <span class="hljs-string">&quot;myCustomEvent&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> e, myName, myValue </span>) </span>{</code></div></div><div class="container"><div class="line"><code>  $( <span class="hljs-built_in">this</span> ).text( myName + <span class="hljs-string">&quot;, hi there!&quot;</span> );</code></div></div><div class="container"><div class="line"><code>  $( <span class="hljs-string">&quot;span&quot;</span> )</code></div></div><div class="container"><div class="line"><code>    .stop()</code></div></div><div class="container"><div class="line"><code>    .css( <span class="hljs-string">&quot;opacity&quot;</span>, <span class="hljs-number">1</span> )</code></div></div><div class="container"><div class="line"><code>    .text( <span class="hljs-string">&quot;myName = &quot;</span> + myName )</code></div></div><div class="container"><div class="line"><code>    .fadeIn( <span class="hljs-number">30</span> )</code></div></div><div class="container"><div class="line"><code>    .fadeOut( <span class="hljs-number">1000</span> );</code></div></div><div class="container"><div class="line"><code>  });</code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;button&quot;</span> ).click(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>  $( <span class="hljs-string">&quot;p&quot;</span> ).trigger( <span class="hljs-string">&quot;myCustomEvent&quot;</span>, [ <span class="hljs-string">&quot;John&quot;</span> ] );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>

                    <h4>Demo:</h4>
                    <div class="demo code-demo"></div>
                  </div>
                  <div class="entry-example" id="example-7">
                    <p>Bind multiple events simultaneously.</p>
                    <div class="syntaxhighlighter javascript">
                      <table>
                        <tbody>
                        <tr>

                          <td class="gutter">

                            <div class="line n1">1</div>

                            <div class="line n2">2</div>

                            <div class="line n3">3</div>

                            <div class="line n4">4</div>

                            <div class="line n5">5</div>

                            <div class="line n6">6</div>

                            <div class="line n7">7</div>

                            <div class="line n8">8</div>

                            <div class="line n9">9</div>

                            <div class="line n10">10</div>

                            <div class="line n11">11</div>

                          </td>

                          <td class="code">
                            <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;div.test&quot;</span> ).bind({</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-attr">click</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>    $( <span class="hljs-built_in">this</span> ).addClass( <span class="hljs-string">&quot;active&quot;</span> );</code></div></div><div class="container"><div class="line"><code>  },</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-attr">mouseenter</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>    $( <span class="hljs-built_in">this</span> ).addClass( <span class="hljs-string">&quot;inside&quot;</span> );</code></div></div><div class="container"><div class="line"><code>  },</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-attr">mouseleave</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</code></div></div><div class="container"><div class="line"><code>    $( <span class="hljs-built_in">this</span> ).removeClass( <span class="hljs-string">&quot;inside&quot;</span> );</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>

                  </div></section>
              </div></article>	</div><!-- .entry-content -->

        </article><!-- #post-55 -->
      </div>

      <div id="sidebar" class="widget-area" role="complementary">
        <aside id="categories" class="widget">
          <ul>
            <li class="cat-item cat-item-1"><a href="//api.jquery.com/category/ajax/" >Ajax</a>
              <ul class='children'>
                <li class="cat-item cat-item-2"><a href="//api.jquery.com/category/ajax/global-ajax-event-handlers/" >Global Ajax Event Handlers</a>
                </li>
                <li class="cat-item cat-item-3"><a href="//api.jquery.com/category/ajax/helper-functions/" >Helper Functions</a>
                </li>
                <li class="cat-item cat-item-4"><a href="//api.jquery.com/category/ajax/low-level-interface/" >Low-Level Interface</a>
                </li>
                <li class="cat-item cat-item-5"><a href="//api.jquery.com/category/ajax/shorthand-methods/" >Shorthand Methods</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-6"><a href="//api.jquery.com/category/attributes/" >Attributes</a>
            </li>
            <li class="cat-item cat-item-7"><a href="//api.jquery.com/category/callbacks-object/" >Callbacks Object</a>
            </li>
            <li class="cat-item cat-item-8"><a href="//api.jquery.com/category/core/" >Core</a>
            </li>
            <li class="cat-item cat-item-9"><a href="//api.jquery.com/category/css/" >CSS</a>
            </li>
            <li class="cat-item cat-item-10"><a href="//api.jquery.com/category/data/" >Data</a>
            </li>
            <li class="cat-item cat-item-11"><a href="//api.jquery.com/category/deferred-object/" >Deferred Object</a>
            </li>
            <li class="cat-item cat-item-87 current-cat-parent current-cat-ancestor"><a href="//api.jquery.com/category/deprecated/" >Deprecated</a>
              <ul class='children'>
                <li class="cat-item cat-item-90"><a href="//api.jquery.com/category/deprecated/deprecated-1.3/" >Deprecated 1.3</a>
                </li>
                <li class="cat-item cat-item-88"><a href="//api.jquery.com/category/deprecated/deprecated-1.7/" >Deprecated 1.7</a>
                </li>
                <li class="cat-item cat-item-89"><a href="//api.jquery.com/category/deprecated/deprecated-1.8/" >Deprecated 1.8</a>
                </li>
                <li class="cat-item cat-item-94"><a href="//api.jquery.com/category/deprecated/deprecated-1.9/" >Deprecated 1.9</a>
                </li>
                <li class="cat-item cat-item-93"><a href="//api.jquery.com/category/deprecated/deprecated-1.10/" >Deprecated 1.10</a>
                </li>
                <li class="cat-item cat-item-98 current-cat"><a href="//api.jquery.com/category/deprecated/deprecated-3.0/" >Deprecated 3.0</a>
                </li>
                <li class="cat-item cat-item-101"><a href="//api.jquery.com/category/deprecated/deprecated-3.2/" >Deprecated 3.2</a>
                </li>
                <li class="cat-item cat-item-99"><a href="//api.jquery.com/category/deprecated/deprecated-3.3/" >Deprecated 3.3</a>
                </li>
                <li class="cat-item cat-item-100"><a href="//api.jquery.com/category/deprecated/deprecated-3.4/" >Deprecated 3.4</a>
                </li>
                <li class="cat-item cat-item-102"><a href="//api.jquery.com/category/deprecated/deprecated-3.5/" >Deprecated 3.5</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-12"><a href="//api.jquery.com/category/dimensions/" >Dimensions</a>
            </li>
            <li class="cat-item cat-item-13"><a href="//api.jquery.com/category/effects/" >Effects</a>
              <ul class='children'>
                <li class="cat-item cat-item-14"><a href="//api.jquery.com/category/effects/basics/" >Basics</a>
                </li>
                <li class="cat-item cat-item-15"><a href="//api.jquery.com/category/effects/custom-effects/" >Custom</a>
                </li>
                <li class="cat-item cat-item-16"><a href="//api.jquery.com/category/effects/fading/" >Fading</a>
                </li>
                <li class="cat-item cat-item-17"><a href="//api.jquery.com/category/effects/sliding/" >Sliding</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-18"><a href="//api.jquery.com/category/events/" >Events</a>
              <ul class='children'>
                <li class="cat-item cat-item-19"><a href="//api.jquery.com/category/events/browser-events/" >Browser Events</a>
                </li>
                <li class="cat-item cat-item-20"><a href="//api.jquery.com/category/events/document-loading/" >Document Loading</a>
                </li>
                <li class="cat-item cat-item-21"><a href="//api.jquery.com/category/events/event-handler-attachment/" >Event Handler Attachment</a>
                </li>
                <li class="cat-item cat-item-22"><a href="//api.jquery.com/category/events/event-object/" >Event Object</a>
                </li>
                <li class="cat-item cat-item-23"><a href="//api.jquery.com/category/events/form-events/" >Form Events</a>
                </li>
                <li class="cat-item cat-item-24"><a href="//api.jquery.com/category/events/keyboard-events/" >Keyboard Events</a>
                </li>
                <li class="cat-item cat-item-25"><a href="//api.jquery.com/category/events/mouse-events/" >Mouse Events</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-26"><a href="//api.jquery.com/category/forms/" >Forms</a>
            </li>
            <li class="cat-item cat-item-27"><a href="//api.jquery.com/category/internals/" >Internals</a>
            </li>
            <li class="cat-item cat-item-28"><a href="//api.jquery.com/category/manipulation/" >Manipulation</a>
              <ul class='children'>
                <li class="cat-item cat-item-29"><a href="//api.jquery.com/category/manipulation/class-attribute/" >Class Attribute</a>
                </li>
                <li class="cat-item cat-item-30"><a href="//api.jquery.com/category/manipulation/copying/" >Copying</a>
                </li>
                <li class="cat-item cat-item-32"><a href="//api.jquery.com/category/manipulation/dom-insertion-around/" >DOM Insertion, Around</a>
                </li>
                <li class="cat-item cat-item-33"><a href="//api.jquery.com/category/manipulation/dom-insertion-inside/" >DOM Insertion, Inside</a>
                </li>
                <li class="cat-item cat-item-34"><a href="//api.jquery.com/category/manipulation/dom-insertion-outside/" >DOM Insertion, Outside</a>
                </li>
                <li class="cat-item cat-item-35"><a href="//api.jquery.com/category/manipulation/dom-removal/" >DOM Removal</a>
                </li>
                <li class="cat-item cat-item-36"><a href="//api.jquery.com/category/manipulation/dom-replacement/" >DOM Replacement</a>
                </li>
                <li class="cat-item cat-item-37"><a href="//api.jquery.com/category/manipulation/general-attributes/" >General Attributes</a>
                </li>
                <li class="cat-item cat-item-38"><a href="//api.jquery.com/category/manipulation/style-properties/" >Style Properties</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-39"><a href="//api.jquery.com/category/miscellaneous/" >Miscellaneous</a>
              <ul class='children'>
                <li class="cat-item cat-item-40"><a href="//api.jquery.com/category/miscellaneous/collection-manipulation/" >Collection Manipulation</a>
                </li>
                <li class="cat-item cat-item-41"><a href="//api.jquery.com/category/miscellaneous/data-storage/" >Data Storage</a>
                </li>
                <li class="cat-item cat-item-42"><a href="//api.jquery.com/category/miscellaneous/dom-element-methods/" >DOM Element Methods</a>
                </li>
                <li class="cat-item cat-item-43"><a href="//api.jquery.com/category/miscellaneous/setup-methods/" >Setup Methods</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-44"><a href="//api.jquery.com/category/offset/" >Offset</a>
            </li>
            <li class="cat-item cat-item-45"><a href="//api.jquery.com/category/properties/" >Properties</a>
              <ul class='children'>
                <li class="cat-item cat-item-46"><a href="//api.jquery.com/category/properties/jquery-object-instance-properties/" >Properties of jQuery Object Instances</a>
                </li>
                <li class="cat-item cat-item-47"><a href="//api.jquery.com/category/properties/global-jquery-object-properties/" >Properties of the Global jQuery Object</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-92"><a href="//api.jquery.com/category/removed/" >Removed</a>
            </li>
            <li class="cat-item cat-item-48"><a href="//api.jquery.com/category/selectors/" >Selectors</a>
              <ul class='children'>
                <li class="cat-item cat-item-49"><a href="//api.jquery.com/category/selectors/attribute-selectors/" >Attribute</a>
                </li>
                <li class="cat-item cat-item-50"><a href="//api.jquery.com/category/selectors/basic-css-selectors/" >Basic</a>
                </li>
                <li class="cat-item cat-item-51"><a href="//api.jquery.com/category/selectors/basic-filter-selectors/" >Basic Filter</a>
                </li>
                <li class="cat-item cat-item-52"><a href="//api.jquery.com/category/selectors/child-filter-selectors/" >Child Filter</a>
                </li>
                <li class="cat-item cat-item-53"><a href="//api.jquery.com/category/selectors/content-filter-selector/" >Content Filter</a>
                </li>
                <li class="cat-item cat-item-54"><a href="//api.jquery.com/category/selectors/form-selectors/" >Form</a>
                </li>
                <li class="cat-item cat-item-55"><a href="//api.jquery.com/category/selectors/hierarchy-selectors/" >Hierarchy</a>
                </li>
                <li class="cat-item cat-item-56"><a href="//api.jquery.com/category/selectors/jquery-selector-extensions/" >jQuery Extensions</a>
                </li>
                <li class="cat-item cat-item-57"><a href="//api.jquery.com/category/selectors/visibility-filter-selectors/" >Visibility Filter</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-58"><a href="//api.jquery.com/category/traversing/" >Traversing</a>
              <ul class='children'>
                <li class="cat-item cat-item-59"><a href="//api.jquery.com/category/traversing/filtering/" >Filtering</a>
                </li>
                <li class="cat-item cat-item-60"><a href="//api.jquery.com/category/traversing/miscellaneous-traversal/" >Miscellaneous Traversing</a>
                </li>
                <li class="cat-item cat-item-61"><a href="//api.jquery.com/category/traversing/tree-traversal/" >Tree Traversal</a>
                </li>
              </ul>
            </li>
            <li class="cat-item cat-item-63"><a href="//api.jquery.com/category/utilities/" >Utilities</a>
            </li>
            <li class="cat-item cat-item-64"><a href="//api.jquery.com/category/version/" >Version</a>
              <ul class='children'>
                <li class="cat-item cat-item-65"><a href="//api.jquery.com/category/version/1.0/" >Version 1.0</a>
                </li>
                <li class="cat-item cat-item-66"><a href="//api.jquery.com/category/version/1.0.4/" >Version 1.0.4</a>
                </li>
                <li class="cat-item cat-item-67"><a href="//api.jquery.com/category/version/1.1/" >Version 1.1</a>
                </li>
                <li class="cat-item cat-item-68"><a href="//api.jquery.com/category/version/1.1.2/" >Version 1.1.2</a>
                </li>
                <li class="cat-item cat-item-69"><a href="//api.jquery.com/category/version/1.1.3/" >Version 1.1.3</a>
                </li>
                <li class="cat-item cat-item-70"><a href="//api.jquery.com/category/version/1.1.4/" >Version 1.1.4</a>
                </li>
                <li class="cat-item cat-item-71"><a href="//api.jquery.com/category/version/1.2/" >Version 1.2</a>
                </li>
                <li class="cat-item cat-item-72"><a href="//api.jquery.com/category/version/1.2.3/" >Version 1.2.3</a>
                </li>
                <li class="cat-item cat-item-73"><a href="//api.jquery.com/category/version/1.2.6/" >Version 1.2.6</a>
                </li>
                <li class="cat-item cat-item-74"><a href="//api.jquery.com/category/version/1.3/" >Version 1.3</a>
                </li>
                <li class="cat-item cat-item-75"><a href="//api.jquery.com/category/version/1.4/" >Version 1.4</a>
                </li>
                <li class="cat-item cat-item-76"><a href="//api.jquery.com/category/version/1.4.1/" >Version 1.4.1</a>
                </li>
                <li class="cat-item cat-item-77"><a href="//api.jquery.com/category/version/1.4.2/" >Version 1.4.2</a>
                </li>
                <li class="cat-item cat-item-78"><a href="//api.jquery.com/category/version/1.4.3/" >Version 1.4.3</a>
                </li>
                <li class="cat-item cat-item-79"><a href="//api.jquery.com/category/version/1.4.4/" >Version 1.4.4</a>
                </li>
                <li class="cat-item cat-item-80"><a href="//api.jquery.com/category/version/1.5/" >Version 1.5</a>
                </li>
                <li class="cat-item cat-item-81"><a href="//api.jquery.com/category/version/1.5.1/" >Version 1.5.1</a>
                </li>
                <li class="cat-item cat-item-82"><a href="//api.jquery.com/category/version/1.6/" >Version 1.6</a>
                </li>
                <li class="cat-item cat-item-83"><a href="//api.jquery.com/category/version/1.7/" >Version 1.7</a>
                </li>
                <li class="cat-item cat-item-84"><a href="//api.jquery.com/category/version/1.8/" >Version 1.8</a>
                </li>
                <li class="cat-item cat-item-86"><a href="//api.jquery.com/category/version/1.9/" >Version 1.9</a>
                </li>
                <li class="cat-item cat-item-103"><a href="//api.jquery.com/category/version/1.12-and-2.2/" >Version 1.12 &amp; 2.2</a>
                </li>
                <li class="cat-item cat-item-95"><a href="//api.jquery.com/category/version/3.0/" >Version 3.0</a>
                </li>
                <li class="cat-item cat-item-96"><a href="//api.jquery.com/category/version/3.1/" >Version 3.1</a>
                </li>
                <li class="cat-item cat-item-104"><a href="//api.jquery.com/category/version/3.2/" >Version 3.2</a>
                </li>
                <li class="cat-item cat-item-105"><a href="//api.jquery.com/category/version/3.3/" >Version 3.3</a>
                </li>
                <li class="cat-item cat-item-106"><a href="//api.jquery.com/category/version/3.4/" >Version 3.4</a>
                </li>
                <li class="cat-item cat-item-107"><a href="//api.jquery.com/category/version/3.5/" >Version 3.5</a>
                </li>
              </ul>
            </li>
          </ul>
        </aside>
      </div>
    </div>
  </div>
</div>

<footer class="clearfix simple">
  <div class="constrain">
    <div class="row">
      <div class="six columns offset-by-three">
        <h3><span>Books</span></h3>
        <ul class="books">
          <li>
            <a href="https://www.packtpub.com/web-development/learning-jquery-fourth-edition">
              <img src="//api.jquery.com/jquery-wp-content/themes/jquery/content/books/learning-jquery-4th-ed.jpg" alt="Learning jQuery 4th Edition by Karl Swedberg and Jonathan Chaffer" width="92" height="114">
              Learning jQuery Fourth Edition
              <cite>Karl Swedberg and Jonathan Chaffer</cite>
            </a>
          </li>
          <li>
            <a href="https://www.manning.com/books/jquery-in-action-third-edition">
              <img src="//api.jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-in-action.jpg" alt="jQuery in Action by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa" width="92" height="114">
              jQuery in Action
              <cite>Bear Bibeault, Yehuda Katz, and Aurelio De Rosa</cite>
            </a>
          </li>
          <li>
            <a href="https://www.syncfusion.com/ebooks/jquery">
              <img src="//api.jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-succinctly.jpg" alt="jQuery Succinctly by Cody Lindley" width="92" height="114">
              jQuery Succinctly
              <cite>Cody Lindley</cite>
            </a>
          </li>
        </ul>
      </div>
    </div>


    <div id="legal">
      <ul class="footer-site-links">
        <li><a class="icon-pencil" href="https://learn.jquery.com/">Learning Center</a></li>
        <li><a class="icon-group" href="https://forum.jquery.com/">Forum</a></li>
        <li><a class="icon-wrench" href="https://api.jquery.com/">API</a></li>
        <li><a class="icon-twitter" href="https://twitter.com/jquery">Twitter</a></li>
        <li><a class="icon-comments" href="https://irc.jquery.org/">IRC</a></li>
        <li><a class="icon-github" href="https://github.com/jquery">GitHub</a></li>
      </ul>
      <p class="copyright">
        Copyright 2021 <a href="https://openjsf.org/">OpenJS Foundation</a> and jQuery contributors. All rights reserved. See <a href="https://jquery.org/license/">jQuery License</a> for more information. The <a href="https://openjsf.org/">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org/">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org/">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org/">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org/">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation <a href="https://terms-of-use.openjsf.org/">Terms of Use</a>, <a href="https://privacy-policy.openjsf.org/">Privacy</a>, and <a href="https://www.linuxfoundation.org/cookies">Cookie</a> Policies also apply.
        <span class="sponsor-line"><a href="https://www.digitalocean.com" class="do-link">Web hosting by Digital Ocean</a> | <a href="https://www.stackpath.com" class="sp-link">CDN by StackPath</a></span>
      </p>
    </div>

  </div>
</footer>

<script type='text/javascript' src='//api.jquery.com/wp-includes/js/comment-reply.min.js?ver=4.5.2'></script>
<script type='text/javascript' src='//api.jquery.com/wp-includes/js/wp-embed.min.js?ver=4.5.2'></script>
<!-- at the end of the BODY -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"  onload="document.querySelector('input[name=\'s\']') && docsearch({apiKey: '3cfde9aca378c8aab554d5bf1b23489b',
		indexName: 'jquery',
		inputSelector: 'input[name=\'s\']',
		debug: true // Set debug to true if you want to inspect the dropdown
	})" async></script>
</body>
</html>
